// 浏览器前缀
@mixin css3($property, $value) {
  @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
    #{$prefix}#{$property}: $value;
  }
}

// Retina图片
@mixin image-2x($image, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
    (-o-min-device-pixel-ratio: 2.6/2),
    (-webkit-min-device-pixel-ratio: 1.3),
    (min-device-pixel-ratio: 1.3),
    (min-resolution: 1.3dppx) {
    /* on retina, use image that's scaled by 2 */
    background-image: url($image);
    background-size: $width $height;
  }
}

// Black和White
@function black($opacity) {
  @return rgba(0, 0, 0, $opacity);
}
@function white($opacity) {
  @return rgba(255, 255, 255, $opacity);
}

// 绝对定位
@mixin abs-pos($top: auto, $right: auto, $bottom: auto, $left: auto) {
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
  position: absolute;
}

// 行高
@mixin line-height($heightValue: 12) {
  //fallback for old browsers
  line-height: (0.125 * $heightValue) + rem;
}

// 阴影
@mixin box-shadow($shadows) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

// 宽高
@mixin wh($width, $height) {
  width: $width;
  height: $height;
}

// 字体大小，颜色
@mixin sc($size, $color) {
  font-size: $size;
  color: $color;
}

// 文字超出用 …
@mixin ellipsis($clamp: 1) {
  overflow: hidden;
  text-overflow: ellipsis;
  @if ($clamp == 1) {
    white-space: nowrap;
  } @else {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $clamp;
    -webkit-box-orient: vertical;
  }
}

// 定位上下左右居中
@mixin center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin textCenter($line-height) {
  line-height: $line-height;
  text-align: center;
}

@mixin flex-column() {
  display: flex;
  flex-direction: column;
}

@mixin flex-center() {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin ripple {
  position: relative;
  overflow: hidden;

  &:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    //设置径向渐变
    background-image: radial-gradient(circle, #666 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform .3s, opacity .5s;
  }

  &:active:after {
    transform: scale(0, 0);
    opacity: .3;
    //设置初始状态
    transition: 0s;
  }
}

@mixin icon-base ($size: 12px) {
  @if $size {
    @include wh($size, $size);
  }
  display: inline-block;
  background-size: 100% 100%;
}

@mixin icon-list ($list, $path: room) {
  @each $icon in $list {
    &.icon-#{$icon} {
      background-image: url("../assets/icons/#{$path}/#{$icon}.png");
    }
  }
}

@mixin hover-icon-list ($hover, $path: room) {
  @each $icon in $hover {
    &.icon-#{$icon} {
      background: url("../assets/icons/#{$path}/#{$icon}.png") center no-repeat;
      background-size: 100%;
    }
  }
}
